import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
// 自定义组件，直接实现红色Text标签
const RedTxt = (props) => {
  return <Text style={styles.txtColor}>{props.content}</Text>
}

const RedTxt2 = (props) => {
  return <Text style={styles.txtColor}>{props.children}</Text>
}








export default function App() {
  return (
    // View本身就是一个弹性盒子，因此不用再display:flex了
    <View style={[styles.container]}>
      <Text>Text01</Text>
      <RedTxt content='自定义组件'></RedTxt>
      <RedTxt2 >自定义组件2</RedTxt2>

      <Text >
        {/* Text文本只能继承父元素Text的样式，不能继承再外层View的样式了 
        View是纵向的主轴，和Text是两回事，所以不会继承
        Text要是再放在一个Text里面就不会再继承View的弹性盒了*/}
        <Text style={styles.txtColor}>
          Text02
          <Text>Text03</Text>
        </Text>
      </Text>

      {/* <Text style={styles.txtColor}>Hello World呀呀呀呀呀呀</Text> */}
      <StatusBar style="auto" />
    </View>
  );
}
// StyleSheet.create({})一个文件可以有多个create，命名也可以变化，
// 不同样式应用到同一个元素上时后者会覆盖前者,多个样式书写的时候这么写来{[styles.container,styles.bg]}
const styles = StyleSheet.create({
  container: {
    flex: 1,

    alignItems: 'center',
    justifyContent: 'center',//和C3中相反，默认主轴方向是纵向的，C3中是横向的
  },
  bg: {
    backgroundColor: '#fdc',
  },
  txtColor: {
    color: '#f00',
    // 默认宽高都可以不带单位，自己会默认单位bp
    fontSize: 32
  }
});
